<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/resource/css/bootstrap.min.css">
<style type="text/css">
	img {
		max-width: 450px;
	}
</style>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<ul class="list-unstyled">
		<c:forEach items="${info.list}" var="article">
			<li class="media">
				<div class="col-md-1">
					<img src="/pic/${article.picture}" height="50" width="50">
				</div>
				
				<div class="col-md-11">		
					<span ><h5><b>${article.title }</b></h5></span>
					<button type="button" onclick="detail(${article.id})"  class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">详情</button>
				</div>	
			</li>
			<hr>
		</c:forEach>
	</ul>
	
	<jsp:include page="/WEB-INF/view/common/pages.jsp"></jsp:include>
	
	
	<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"><span id="title"><!-- 模态框的标题 --></span></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="content">
        <!-- 模态框要展示出的数据内容 -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
       
      </div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript">
	//分页的方法
	function goPage(pageNum){
		/* location="/my/articles?pageNum="+pageNum; */
		
		//直接在中央展示区，加载数据
		$("#center").load("/my/articles?pageNum="+pageNum);
	}
	
	//查看文章详情的方法
	function detail(id){
		//调用ajax从后台获取数据
		$.post(
			"/my/getArticleById",
			{id:id},
			function(article){
				$("#title").html(article.title);
				$("#content").html(article.content);
			}
		)
		
	}
</script>
</html>